<template>
	<!-- 核销功能页面 -->
	<kb-layout title="核销订单">
		<view class="bg-wite u-padding-30 u-margin-top-15">

			<view class="u-flex u-flex-between u-margin-top-40">
				<u-button icon="scan" text="核销员扫码" @click="postQrcodeValue" shape="circle" type="success"
					:plain="true"></u-button>

			</view>
			
			<view v-if="message" class="color-red">
				<view class="line-border u-margin-top-30"> </view>
				<view class="align-center u-margin-top-30 text-center">
					<text>× {{message}}</text>
				</view>				
			</view>
			
			<view v-if="dook" class="color-main">
				<view class="line-border u-margin-top-30"> </view>
				<view class="align-center u-margin-top-30 text-center">
					<text>√ {{dook}}</text>
				</view>				
			</view>
			
			
		</view>
		
		
		<!-- 下面是扫码后显示订单的相关信息 -->

		<view v-if="showResult" class="qrcode-result">

			<view class="bg-wite  u-padding-25 u-margin-top-30">
				<view class="group-title u-flex u-flex-between">
					<view class="">
						<text class="vertical-line" :style="{backgroundColor:ee.bgColor.weight}"></text>
						<text class="color-main font-weight font-size16"> {{ticket.title}} </text>
					</view>
					<view class="">
						<text>{{detail.buy_num}}张</text>
					</view>
				</view>
				<view class="line-border u-margin-top-30"> </view>

				<view class="font-size14">
					<view class="u-flex u-flex-start align-center u-margin-top-30">
						<view class="field-label ">
							<text class="font-weight">出行日期：</text>
						</view>
						<view class="">
							<text>{{detail.select_day}}</text>
						</view>
					</view>
					<view class="u-flex u-flex-start align-center u-margin-top-30">
						<view class="field-label ">
							<text class="font-weight">项目：</text>
						</view>
						<view class="">
							<text>{{detail.good_title}}</text>
						</view>
					</view>
					<view class="u-flex u-flex-start align-center u-margin-top-30">
						<view class="field-label ">
							<text class="font-weight">目的地：</text>
						</view>
						<view class="">
							<text>{{ticket.address}}</text>
						</view>
					</view>
				</view>


			</view>

			<view class="bg-wite  u-padding-25 u-margin-top-30">
				<view class="font-size14">
					<view class="u-flex u-flex-start align-center u-margin-top-30">
						<view class="field-label ">
							<text class="font-weight">出行人：</text>
						</view>
						<view class="fvalue">
							<view class="" v-for="(people,index) in peoples" :key="index">
								<view class="">
									<text>{{people.first_name}}</text> <text>{{people.name}}</text>
								</view>
								<view class="">
									<text>{{people.mobile}}</text>
								</view>
							</view>
						</view>
					</view>
					<view class="u-flex u-flex-start align-center u-margin-top-30">
						<view class="field-label ">
							<text class="font-weight">备注：</text>
						</view>
						<view class="fvalue">
							<text>{{order.remark}}</text>
						</view>
					</view>
				</view>
			</view>

			<view class="bg-wite  u-padding-25 u-margin-top-30">
				<view class="font-size14">
					<view class="u-flex u-flex-start align-center u-margin-top-30">
						<view class="field-label ">
							<text class="font-weight">订单编号：</text>
						</view>
						<view class="fvalue">
							<text>{{order.order_no}}</text>
							<text class="copy" @click="copyOrderNo(order.order_no)">复制</text>
						</view>
					</view>
					<view class="u-flex u-flex-start align-center u-margin-top-30">
						<view class="field-label ">
							<text class="font-weight">下单时间：</text>
						</view>
						<view class="fvalue">
							<text>{{order.create_time}}</text>
						</view>
					</view>

				</view>
			</view>
		</view>
	</kb-layout>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from 'vue';
	import {
		orderDetail,
		qrcodeOrder
	} from "@/common/api.js";

	const ticket = ref({});
	const order = ref({});
	const peoples = ref([]);
	const detail = ref({});
	const showResult = ref(false);
	//扫码结果字符串
	const qrcodeValue = ref('verifyRedPack=AN2501010527');
	const message = ref('');
	const dook = ref('');//核销正确

	//扫码结果查询接口
	function postQrcodeValue() {
		message.value = '';
		 dook.value =  '';
		showResult.value = false;
		uni.scanCode({
			onlyFromCamera: true,
			scanType:['qrCode'],
			success(res) {
				//res.result = 扫描得到的文本
				qrcodeOrder( res.result ).then((ret) => {
					 //获取订单数据
					 if( ret.errno ==1){
						 message.value = ret.message;
					 }else{
						 dook.value = '核销成功';
						 if(ret.type=='order')
							fetchData(ret.data.id); 
					 } 
					
				})
			},
			fail() {
				qrcodeOrder( qrcodeValue.value ).then((ret) => {
					 //获取订单数据 
					if( ret.errno ==1){
							 message.value = ret.message;				 
					}else{
						 dook.value =  '核销成功';
						 if(ret.type=='order')
							fetchData(ret.data.id); 
					} 
				})
			}
		})
		
	}

	function fetchData(id) {
		orderDetail(id).then((ret) => {
			showResult.value = true; //显示结果
			ticket.value = ret.ticket;
			peoples.value = ret.peoples
			order.value = ret.order;
			detail.value = ret.detail;
		})
	}
</script>


<style lang="scss" scoped>
	.bg-wite {
		background-color: #fff;
	}

	.group-title {
		display: flex;
		align-items: center;
		margin-bottom: .9rem;
		margin-top: .9rem;
	}

	.vertical-line {
		content: '';
		display: inline-block;
		height: 15px;
		width: 4px;
		background-color: $u-primary;
		margin-right: 8px;
		border-radius: 4px;
	}

	.field-label {
		width: 30%;
		text-align: left;
	}

	.fvalue {
		width: 69.5%;
		text-align: left;
	}

	.copy {
		border: $u-border-color 1px solid;
		font-size: 11px;
		padding: 2px 5px;
		margin-left: 10px;
		border-radius: 5px;
	}
</style>